<template>
    <div>
        <!-- <div>通过state对象直接获取：{{ state.user.userInfo.name }}</div>
    <div>通过userStated的getters获取：{{ userState.getUserName }}</div>
    <div>通过userState的state对象直接获取：{{ userState.name }}</div> -->
        <div>通过state对象直接获取：{{ user.userInfo.name }}</div>
        <div>通过userStated的getters获取：{{ userName }}</div>
        <div>通过userState的state对象直接获取：{{ name }}</div>
        <button @click="setCount(10)">+10</button>
    </div>
</template>

<script>
import { mapState, mapActions } from 'pinia'
import { maninState } from "@/store/index.js"
import { userInfo } from "@/store/user/index.js"
export default {
    computed: {
        ...mapState(maninState, ['user']),
        ...mapState(userInfo, {
            userName: (state) => state.getUserName,
        }),
        ...mapState(userInfo, ['name']),
    },
    methods: {
        ...mapActions(maninState, ['setCount']),
    },
}
</script>

<!-- <script setup>
// 引入定义好的实例
import { maninState } from "@/store/index.js"
import { userInfo } from "@/store/user/index.js"
const userState = userInfo();
// 执行实例方法获取到具体的状态对象
const state = maninState();
</script> -->
<style scoped>
</style>